<style type="text/css">
    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
<template>
    <i-form>
        <Form-item label="标题：" prop="title">
            <span>{{formValidate.title}}</span>
        </Form-item>
        <Form-item label="封面：" prop="path">
            <img :src="formValidate.coverpath" @click="handleView(formValidate.coverpath)">
        </Form-item>
        <Form-item label="作者：">
            <span>{{formValidate.writer}}</span>
        </Form-item>
        <Form-item label="来源：">
            <span>{{formValidate.source}}</span>
        </Form-item>
        <Form-item label="点赞数：">
            <span>{{formValidate.support}}</span>
        </Form-item>
        <!--上传图片-->
        <Form-item label="图片：" prop="image">
            <div class="demo-upload-list">
                <template v-for="item in image">
                    <img :src="item" @click="handleView(item)">
                </template>
            </div>
        </Form-item>
        <Modal title="查看图片" v-model="visible">
            <img :src="seeImg"  v-if="visible" style="width: 100%">
        </Modal>
    </i-form>

</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                formValidate: {
                    //添加字段
                    coverpath: '',
                    title: '',
                    writer: '',
                    source: '',
                    support: '',
                },
                image: '',
                visible: false,
                seeImg:'',
            }
        },
        mounted: function () {

            let id = this.$route.query.id;
           this.getDetail(id)
        },

        methods: {
            //预览上传图片
            handleView(url) {
                this.seeImg = url;
                this.visible = true;
            },
            //详情
            getDetail:function(id){
                let that = this;
                that.$Loading.start();

                let para ={
                    id:id,
                };

                let params = that.$qs.stringify(para);
                apiUtil.post(apiUtil.urls.newsDetail, params, function (res) {
                    that.$Loading.finish();
                    that.formValidate.coverpath =res.data.coverpath;
                    that.formValidate.title =res.data.title;
                    that.formValidate.writer =res.data.writer;
                    that.formValidate.source =res.data.source;
                    that.formValidate.support =res.data.support;
                    that.image = res.data.resource;
                });
            },


        }
    }
</script>
